<template>
  <div class="detail">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <el-form :model="form">
            <el-form-item label-width="200px" label="用户名">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label-width="200px" label="密码">
              <el-input v-model="form.npassword" show-password />
            </el-form-item>
            <el-form-item label-width="200px">
              <el-button type="primary" @click="update">更新</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 用户详情 -->
        <el-tab-pane label="配置管理" name="second">
          <Info />
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="third">
          <Job />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserDetailById, saveUserDetailById } from '@/api/user'
export default {
  name: 'Detail',
  components: {
    Info: () => import('./component/Info.vue'),
    Job: () => import('./component/Job.vue')
  },
  data() {
    return {
      activeName: 'first',
      form: {
        username: '',
        npassword: ''
      }
    }
  },
  async created() {
    // console.log('this.$route', this.$route)
    const { data: res } = await getUserDetailById(this.$route.params.id)
    Object.assign(this.form, res)
  },
  methods: {
    async update() {
      const res = await saveUserDetailById({
        ...this.form,
        password: this.form.npassword
      })
      // 弹出成功提示
      this.$message.success(res.message)
      // 修改成功重新登录,删除token
      await this.$store.dispatch('user/logoOut')
      // 跳回login
      this.$router.push(`/login`)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  ::v-deep .el-form-item__content {
    width: 50%;
  }
}
</style>
